<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>test</title>
		<meta name="Description" content="" />
		<meta name="Keywords" content="" />
		<script type="text/javascript" src="../src/ichart.core.js"></script>
		<script type="text/javascript" src="../src/ichart.element.js"></script>
		<script type="text/javascript" src="../src/ichart.html.js"></script>
		<script type="text/javascript" src="../src/ichart.painter.js"></script>
		<script type="text/javascript" src="../src/ichart.component.js"></script>
		<script type="text/javascript" src="../src/ichart.legend.js"></script>
		<script type="text/javascript" src="../src/ichart.label.js"></script>
		<script type="text/javascript" src="../src/ichart.chart.js"></script>
		<script type="text/javascript" src="../src/ichart.custom.js"></script>
		<script type="text/javascript" src="../src/ichart.sector.js"></script>
		<script type="text/javascript" src="../src/ichart.sector2d.js"></script>
		<script type="text/javascript" src="../src/ichart.sector3d.js"></script>
		<script type="text/javascript" src="../src/ichart.rectangle.js"></script>
		<script type="text/javascript" src="../src/ichart.rectangle2d.js"></script>
		<script type="text/javascript" src="../src/ichart.rectangle3d.js"></script>
		<script type="text/javascript" src="../src/ichart.column.js"></script>
		<script type="text/javascript" src="../src/ichart.column2d.js"></script>
		<script type="text/javascript" src="../src/ichart.bar.js"></script>
		<script type="text/javascript" src="../src/ichart.bar2d.js"></script>
		<script type="text/javascript" src="../src/ichart.barstacked2d.js"></script>
		<script type="text/javascript" src="../src/ichart.columnmulti2d.js"></script>
		<script type="text/javascript" src="../src/ichart.columnstacked2d.js"></script>
		<script type="text/javascript" src="../src/ichart.columnstacked3d.js"></script>
		<script type="text/javascript" src="../src/ichart.columnmulti3d.js"></script>
		<script type="text/javascript" src="../src/ichart.barmulti2d.js"></script>
		<script type="text/javascript" src="../src/ichart.column3d.js"></script>
		<script type="text/javascript" src="../src/ichart.tip.js"></script>
		<script type="text/javascript" src="../src/ichart.text.js"></script>
		<script type="text/javascript" src="../src/ichart.pie.js"></script>
		<script type="text/javascript" src="../src/ichart.pie2d.js"></script>
		<script type="text/javascript" src="../src/ichart.donut2d.js"></script>
		<script type="text/javascript" src="../src/ichart.pie3d.js"></script>
		<script type="text/javascript" src="../src/ichart.coordinate.js"></script>
		<script type="text/javascript" src="../src/ichart.crosshair.js"></script>
		<script type="text/javascript" src="../src/ichart.linesegment.js"></script>
		<script type="text/javascript" src="../src/ichart.line.js"></script>
		<script type="text/javascript" src="../src/ichart.linebasic2d.js"></script>
		<script type="text/javascript" src="../src/ichart.area2d.js"></script>
		<script type="text/javascript" src="../plugin/ichart.gauge2d.js"></script>
		<script type="text/javascript" src="../plugin/ichart.slider.js"></script>
		<style type="text/css">
body {
	text-align: center;
	background-repeat: repeat;
    background-color: #0c1b38;
}
#canvasDiv {
	margin: 0px auto;
	text-align: center;
    color:#0d8ecf;
}
#ichartjs_result{
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding:8px;
    color:#fefefe;
    font-size:20px;
    font-weight:600;
    background-color:#6d869f;
    cursor: pointer;
    text-align:center;
    border:1px solid #6a869d;
    -webkit-box-shadow:0px 0px 2px #375073;
    -moz-box-shadow:0px 0px 2px #375073;
    box-shadow:0px 0px 2px #375073;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    border-radius:10px
}
</style>
		<script type="text/javascript">
            $(function(){
                var data = [
                    {
                        name : '北京',
                        value:[6],
                        color:'#1f7e92',
                        line_width:2
                    }
                ];

                var chart = new iChart.Area2D({
                    render : 'canvasDiv',
                    data: data,
                    title : '北京2012年平均温度情况',
                    width : 800,
                    height : 400,
                    coordinate:{height:'90%',background_color:'#edf8fa'},
                    sub_option:{
                        hollow_inside:false,//设置一个点的亮色在外环的效果
                        point_size:10
                    },
                    labels:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
                });

                chart.draw();
            });
        </script>
	</head>
	<body>
		<div id='canvasDiv' ></div>
        <div style='width:360px;'>
            <br/>
            <input type="button" onclick="change();" value="load">
        </div>
	</body>
</html>
